import { defineComponent } from "vue";
import "./style.scss";
import { events } from "../events";

// 拉伸组件
export const BlockResizer = defineComponent({
  props: {
    block: { type: Object, required: true },
    component: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    // 横向拉伸  纵向拉伸
    const { width, height } = props.component?.resize || {}; // 组件拉伸方式

    // 选中后显示拉伸
    const onMousedown = (() => {
      let data = {
        startX: 0,
        startY: 0,
        startWidth: 0,
        startHeight: 0,
        startLeft: 0,
        startTop: 0,
        direction: {}, //方向 横 纵
        dragging: false, //是否正在拉伸
      };

      const mousemove = (e) => {
        // 正在拉伸
        const { startX, startY, startWidth, startHeight, direction, startLeft, startTop, dragging } = data;
        if (!dragging) {
          data.dragging = true;
          // 撤消恢复事件
          events.emit("start");
        }

        let { clientX: moveX, clientY: moveY } = e;
        // 判断是向横向还是纵向拉伸
        if (direction.horizontal === "center") {
          moveX = startX;
        }
        if (direction.vertical === "center") {
          moveY = startY;
        }

        // 计算拉伸的距离
        let durX = moveX - startX;
        let durY = moveY - startY;

        const block = props.block;

        // 纵向 上节点为start节点， 上拉得负数
        if (direction.vertical == "start") {
          durY = -durY;
          block.top = startTop - durY;
        }
        // 横向 左节点为start节点
        if (direction.horizontal == "start") {
          durX = -durX;
          block.left = startLeft - durX;
        }

        const width = startWidth + durX;
        const height = startHeight + durY;

        // 设置组件宽度
        block.width = width;
        block.height = height;
        block.hasResize = true;
      };

      const mouseup = (e) => {
        // 鼠标释放
        // 取消事件绑定
        document.body.removeEventListener("mousemove", mousemove);
        document.body.removeEventListener("mouseup", mouseup);
        if (data.dragging) {
          events.emit("end");
          data.dragging = false;
        }
      };

      const mousedown = (e, direction) => {
        // 阻止默认事件冒泡传递
        e.stopPropagation();
        // 绑定事件
        document.body.addEventListener("mousemove", mousemove);
        document.body.addEventListener("mouseup", mouseup);
        // 拿到初始的组件状态数据
        data = {
          startX: e.clientX,
          startY: e.clientY,
          direction,
          startWidth: props.block.width,
          startHeight: props.block.height,
          startLeft: props.block.left,
          startTop: props.block.top,
          dragging: false,
        };
      };

      return mousedown;
    })();

    return () => (
      <>
        {height && (
          <>
            {/* 可以纵向拉伸 */}
            <div
              class="block-resize block-resize-top"
              onmousedown={(e) =>
                onMousedown(e, {
                  horizontal: "center", //表示纵向的中间
                  vertical: "start", //表示拉伸开始点
                })
              }
            ></div>
            <div
              class="block-resize block-resize-bottom"
              onmousedown={(e) =>
                onMousedown(e, {
                  horizontal: "center",
                  vertical: "end", //表示拉伸结束点
                })
              }
            ></div>
          </>
        )}

        {width && (
          <>
            {/* 可以横向拉伸 */}
            <div
              class="block-resize block-resize-left"
              onmousedown={(e) =>
                onMousedown(e, {
                  vertical: "center", //横向的中间
                  horizontal: "start", //横向开始节点
                })
              }
            ></div>
            <div
              class="block-resize block-resize-right"
              onmousedown={(e) =>
                onMousedown(e, {
                  vertical: "center", //横向中间位置
                  horizontal: "end", //横向结束节点
                })
              }
            ></div>
          </>
        )}

        {width && height && (
          <>
            <div
              class="block-resize block-resize-top-left"
              onmousedown={(e) =>
                onMousedown(e, {
                  horizontal: "start", // 横的start
                  vertical: "start", // 纵的start节点
                })
              }
            ></div>
            <div
              class="block-resize block-resize-top-right"
              onmousedown={(e) =>
                onMousedown(e, {
                  horizontal: "end", // 横的结束点
                  vertical: "start", // 纵的start节点
                })
              }
            ></div>
            <div
              class="block-resize block-resize-bottom-left"
              onmousedown={(e) =>
                onMousedown(e, {
                  horizontal: "start", // 横的start节点
                  vertical: "end", // 纵的end节点
                })
              }
            ></div>
            <div
              class="block-resize block-resize-bottom-right"
              onmousedown={(e) =>
                onMousedown(e, {
                  horizontal: "end", // 横的end节点
                  vertical: "end", // 纵的end节点
                })
              }
            ></div>
          </>
        )}
      </>
    );
  },
});
